<template>
	<view class="user pagebg">
		<view class="usercontent">
			<image src="/static/xxmLogo.png" mode="aspectFill" class="logoimage"></image>
			<view class="info">
				<view class="name">
					119.119.119.119
				</view>
				<view class="from">
					来自：湖北
				</view>
			</view>
		</view>
		<view class="section">
			<ul>
				<navigator url="/pages/classlist/classlist">
					<li class="item">

						<uni-icons type="download-filled" size="30" color="$uni-brand-color"></uni-icons>
						<text class="text">我的下载</text>
						<view class="left">
							<text>0</text>
							<uni-icons type="right" size="30" color="rgb(128, 128, 128)"> </uni-icons>
						</view>

					</li>
				</navigator>
				<navigator url="/pages/classlist/classlist">
				<li class="item">
					<uni-icons type="star-filled" size="30" color="$uni-brand-color"></uni-icons>
					<text class="text">我的评分</text>
					<view class="left">
						<text>0</text>
						<uni-icons type="right" size="30" color="rgb(128, 128, 128)"> </uni-icons>
					</view>
				</li>
				</navigator>
				<li class="item">
					<uni-icons type="chatboxes-filled" size="30" color="$uni-brand-color"></uni-icons>
					<text class="text">我的客服</text>
					<view class="left">
						<text>0</text>
						<uni-icons type="right" size="30" color="rgb(128, 128, 128)"> </uni-icons>
					</view>
					<button open-type="contact" class="btn" @click="btn">1</button>
				</li>
			</ul>
		</view>
		<view class="section">
			<ul>
				<li class="item">
					<uni-icons type="notification-filled" size="30" color="$uni-brand-color"></uni-icons>
					<text class="text">订阅更新</text>
					<view class="left">
						<text>0</text>
						<uni-icons type="right" size="30" color="rgb(128, 128, 128)"> </uni-icons>
					</view>
				</li>
				<li class="item">
					<uni-icons type="flag-filled" size="30" color="$uni-brand-color"></uni-icons>
					<text class="text">常见问题</text>
					<view class="left">
						<text>0</text>
						<uni-icons type="right" size="30" color="rgb(128, 128, 128)"> </uni-icons>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script setup>
	const btn = () => {
		console.log('111');
	}
</script>

<style lang="scss" scoped>
	.user {
		padding: 30rpx;

		.usercontent {
			height: 330rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;

			.logoimage {
				width: 195rpx;
				height: 185rpx;
				border-radius: 50%;
			}

			.name {
				font-size: 40rpx;
				font-weight: bold;
			}

			.from {
				padding-top: 10rpx;
				font-size: 30rpx;
				color: gray;
				text-align: center;
			}
		}

		.section {
			width: 690rpx;
			border: 1px solid gray;
			border-top: 0;
			margin-bottom: 50rpx;
			margin-top: 120rpx;
			box-shadow: 0 0 60rpx rgba(0, 0, 0, .05);
			border-radius: 20rpx;
			overflow: hidden;

			.item {
				width: 100%;
				height: 120rpx;
				padding: 0 10rpx;
				color: rgb(128, 128, 128);
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 40rpx;
				border-top: 1px solid gray;
				position: relative;

				:deep() {
					.uni-icons {
						color: $uni-brand-color !important;
					}
				}


				.btn {
					width: 100%;
					position: absolute;
					opacity: 0;
				}

				.text {
					flex: 1;
					margin-left: 20rpx;
				}

				.left {
					display: flex;

				}
			}
		}
	}
</style>